<template>
    <el-form label-width="120px" :model="clueRemark" :rules="clueRemarkRules" ref="clueRemarkFormRef">
        <el-form-item label="ID">
            <div class="detail">{{ clueDetail.id }}</div>
        </el-form-item>

        <el-form-item label="负责人">
            <div class="detail">{{ clueDetail.ownerDO.name }}</div>
        </el-form-item>

        <el-form-item label="所属活动">
            <div class="detail"> {{ clueDetail.activityDO.name }} </div>
        </el-form-item>

        <el-form-item label="姓名">
            <div class="detail"> {{ clueDetail.fullName }} </div>
        </el-form-item>

        <el-form-item label="称呼">
            <div class="detail">{{ clueDetail.appellationDO.typeValue }}</div>
        </el-form-item>

        <el-form-item label="手机">
            <div class="detail">{{ clueDetail.phone }}</div>
        </el-form-item>

        <el-form-item label="微信">
            <div class="detail">{{ clueDetail.weixin }}元</div>
        </el-form-item>

        <el-form-item label="QQ">
            <div class="detail">{{ clueDetail.qq }}</div>
        </el-form-item>

        <el-form-item label="邮箱">
            <div class="detail">{{ clueDetail.email }}</div>
        </el-form-item>

        <el-form-item label="年龄">
            <div class="detail">{{ clueDetail.age }}</div>
        </el-form-item>

        <el-form-item label="职业">
            <div class="detail">{{ clueDetail.job }}</div>
        </el-form-item>

        <el-form-item label="年收入">
            <div class="detail">{{ clueDetail.yearIncome }}</div>
        </el-form-item>

        <el-form-item label="住址">
            <div class="detail">{{ clueDetail.address }}</div>
        </el-form-item>

        <el-form-item label="是否贷款">
            <div class="detail">{{ clueDetail.needLoan === 1 ? '需要' : '不需要' }}</div>
        </el-form-item>
        <el-form-item label="意向状态">
            <div class="detail">{{ clueDetail.intentionStateDO === null ? '' : clueDetail.intentionStateDO.typeValue }}
            </div>
        </el-form-item>
        <el-form-item label="意向产品">
            <div class="detail">{{ clueDetail.intentionProductDO === null ? '' : clueDetail.intentionProductDO.name }}
            </div>
        </el-form-item>
        <el-form-item label="线索状态">
            <div class="detail">{{ clueDetail.stateDO === null ? '' : clueDetail.stateDO.typeValue }}</div>
        </el-form-item>
        <el-form-item label="线索来源">
            <div class="detail">{{ clueDetail.sourceDO === null ? '' : clueDetail.sourceDO.typeValue }}</div>
        </el-form-item>

        <el-form-item label="线索描述">
            <div class="detail">{{ clueDetail.description }}</div>
        </el-form-item>
        <el-form-item label="下次跟踪时间">
            <div class="detail">{{ clueDetail.nextContactTime }}</div>
        </el-form-item>
        <el-form-item label="创建时间">
            <div class="detail">{{ clueDetail.createTime }}</div>
        </el-form-item>
        <el-form-item label="创建人">
            <div class="detail">{{ clueDetail.createByDO === null ? '' : clueDetail.createByDO.name }}</div>
        </el-form-item>
        <el-form-item label="编辑时间">
            <div class="detail">{{ clueDetail.editTime }}</div>
        </el-form-item>
        <el-form-item label="编辑人">
            <div class="detail">{{ clueDetail.editByDO === null ? '' : clueDetail.editByDO.name }}</div>
        </el-form-item>
        <el-form-item label="线索跟踪记录" prop="noteContent">
            <el-input v-model="clueRemark.noteContent" :rows="8" type="textarea" placeholder="请输入活动备注记录" />
        </el-form-item>
        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select v-model="clueRemark.noteWay" placeholder="请选择跟踪方式" clearable @click="loadDicData('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="clueRemarkSubmit(clueRemarkFormRef)">提 交</el-button>
            <el-button type="success" v-on:click="convertCustomer" v-if="clueDetail.stateDO.id !== -1" >转换客户</el-button>
            <el-button type="primary" plain v-on:click="goBack">返 回</el-button>
        </el-form-item>

        <el-form-item>
            <el-table :data="clueRemarkPageInfo.list" style="width: 100%" @selection-change="handSelection">
                <el-table-column type="index" label="序号" width="65" />
                <el-table-column property="noteWayDO.typeValue" label="跟踪方式" />
                <el-table-column property="noteContent" label="跟踪内容" />
                <el-table-column property="createTime" label="创建时间" />
                <el-table-column property="createByDO.name" label="创建人" />
                <el-table-column property="editTime" label="编辑时间" />
                <el-table-column property="editByDO.name" label="编辑人" />
                <el-table-column label="操作" width="110">
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next, jumper, total" :total="clueRemarkPageInfo.total"
                :page-size="clueRemarkPageInfo.pageSize" @change="toPage" />
        </el-form-item>

        <el-dialog title="转换客户" v-model="convertCustomerDialogVisible" width="800">
            <el-form :model="customer" label-width="auto">
                <el-form-item label="购买产品">
                    <el-select v-model="customer.productId" placeholder="请选择产品" clearable @click="loadProduct">
                        <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户描述">
                    <el-input v-model="customer.description" :rows="8" type="textarea" placeholder="请输入客户描述" />
                </el-form-item>
                <el-form-item label="下次跟踪时间">
                    <el-date-picker v-model="customer.nextContactTime" type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择下次跟踪时间" style="width: 100%;" clearable />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="convertCustomerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="convertCustomerSubmit">导 入</el-button>
                </div>
            </template>
        </el-dialog>

    </el-form>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { doGet, doPost } from '../http/httpRequest';
import { showMessage } from "../util/message";


let route = useRoute();
let router = useRouter();
let clueRemark = ref({});
let clueRemarkPageInfo = ref({});
let noteWayOptions = ref([{}]); // 跟踪方式选项
let flashPage = inject('flush');
let clueRemarkFormRef = ref();
let convertCustomerDialogVisible = ref(false)
let customer = ref({})
//意向产品的下拉列表数组对象，初始值是空
let productOptions = ref([{}])
// let customerFormRef = ref({})


let clueDetail = ref({
    ownerDO: {},
    activityDO: {},
    appellationDO: {},
    intentionStateDO: {},
    intentionProductDO: {},
    stateDO: {},
    sourceDO: {},
    createByDO: {},
    editByDO: {}
});

onMounted(() => {
    loadClueDetail();
    loadClueRemarkPage(1);
})

const loadClueDetail = () => {
    let id = route.params.clueId;
    doGet('/api/clue/' + id, {}).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                clueDetail.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

const loadDicData = (type) => {
    doGet('/api/dic/' + type, {}).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                noteWayOptions.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

const clueRemarkSubmit = (formEl) => {
    let id = route.params.clueId;
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            doPost('/api/clue/remark', {
                clueId: id,
                noteContent: clueRemark.value.noteContent,
                noteWay: clueRemark.value.noteWay
            }).then(resp => {
                if (resp.data.code == 200) {
                    showMessage('提交成功', 'success')
                    flashPage() // 修正拼写错误
                } else {
                    showMessage(resp.data.msg || '提交失败', 'error') // 显示具体错误信息
                }
            })
        }
    })
}

const loadClueRemarkPage = (current) => {
    let id = route.params.clueId;
    doGet('/api/clue/' + id + '/remarks', {
        current: current
    }).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                clueRemarkPageInfo.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

//分页函数
const toPage = (currentPage, pageSize) => {
    loadClueRemarkPage(currentPage);
}

const convertCustomer = () => {
    convertCustomerDialogVisible.value = true;
}

const loadProduct = () => {
    doGet('/api/products', {}).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                productOptions.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

const convertCustomerSubmit = () => {
    let id = route.params.clueId;
    doPost('/api/customer', {
        clueId: id,
        product: customer.value.productId,
        description: customer.value.description,
        nextContactTime: customer.value.nextContactTime
    }).then(resp => {
        if (resp.data.code == 200) {
            showMessage('提交成功', 'success')
            flashPage()
        } else {
            showMessage(resp.data.msg || '提交失败', 'error') // 显示具体错误信息
        }
    })
}


</script>
<style scoped></style>